


import React, {memo, useReducer, useCallback, useState} from 'react';
import ReactDOM from "react-dom"
let state = [];
let setters = [];
let stateIndex = 0;

// function useState(initialState) {

//   state[stateIndex] = state[stateIndex] || initialState
  
//   setters.push(createSetter(stateIndex));

//   let value = state[stateIndex];

//   let setter = setters[stateIndex];
  
//   stateIndex ++

//   return [value, setter]
// }

// function createSetter(index) {
  
//   return function setState(newState) {
//     state[index] = newState;
//     render();
//   }
// }
// let prevEffect = [];
// let effectIndex = 0;

// function useEffect(fn, depsAry) {
//   if (Object.prototype.toString.call(fn) !== '[object Function]') throw new Error('useEffect 的第一个参数必须是函数')
//   if (typeof depsAry === 'undefined') {
//     fn()
//   } else {
//     if (Object.prototype.toString.call(depsAry) !== '[object Array]') throw new Error('useEffect 的第二个参数必须是数组')

//     let currentprevEffect = prevEffect[effectIndex]

//     console.log(prevEffect, effectIndex, depsAry)
//     let hasChanged = currentprevEffect ? depsAry.every(((effect, index) => effect === currentprevEffect[index])) === false : true;

//     if (hasChanged) {
//       fn()
//     }
//   }

//   prevEffect[effectIndex] = depsAry;

//   effectIndex++
// }

// function render() {
//   stateIndex = 0;
//   effectIndex = 0;
//   console.log('render')
//   ReactDOM.render(<App/>, document.getElementById('root'))
// }

function App() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  const [name, setName] = useState('zhangsan');

  // useEffect(() => {
  //   console.log('useEffect')
  // }, [count])

  // const [num, dispatch] = useReducer(reducer, 0)
  // function reducer(state, action) {
  //   switch (action.type) {
  //     case 'increment':
  //       return state + 1;
  //     case 'decrement':
  //       return state - 1;
  //     default:
  //       return state;
  //   }
  // }

  const increment = useCallback((value) => {
    console.log(value, count, count2, name)
  }, [count, count2, name])

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount2(count2 + 1)}>+1</button>
      <button onClick={() => setName('lisi')}>+1</button>
      <button onClick={() => increment(2)}>+1</button>
      <div>{count2}</div>
      <div>{name}</div>
      hooks 
    </div>
  );
}

const ChildMomo = memo(function Child(props) {
  console.log('child is refresh')
  return (
    <div>
      memo  {props.count}
    </div>
  );
})

export default App;
